<template>
  <div v-if="orderDetail" class="order-detail">
  	<shop-header ref="shopHeader">	
			<h2>订单详情</h2>	
		</shop-header>
    <div class="order-detail-wrapper">
      <div class="order-detail-top">
        <div class="order-status bottom-1px">
          <div class="inner-line">
            <p>订单状态：<span class="status">{{ orderDetail.status }}</span></p>
            <div class="pay-time" v-if="orderDetail.payRemainTime > 0">
              <i class="iconfont icon-shijian"></i>
              <span>支付剩余：{{ countDown }}</span>
            </div>
          </div>
          <div class="inner-line">
            <p>订单编号：<span>{{ orderDetail.orderNo }}</span></p>
          </div>
          <div class="inner-line">
            <p>下单时间：<span>{{ orderDetail.createAt }}</span></p>
          </div>
          <div v-if="orderDetail.status == '待付款'" class="pay_now" style="padding: 10px 0 5px 0">
            <six-button @click.native="toBuyConfirm" type="danger">去支付</six-button>
          </div>
          <div v-else-if="orderDetail.status == '待收货'" class="pay_now" style="padding: 10px 0 5px 0">
            <six-button @click.native="confirmReceive" type="danger">确认收货</six-button>
          </div>
          <router-link :to="{ path: '/order/publishComment', query: { id: orderDetail._id } }" tag="div" v-else-if="orderDetail.status == '待评价'" class="pay_now" style="padding: 10px 0 5px 0">
            <six-button type="danger">去评价</six-button>
          </router-link>
        </div>
        <router-link v-if="orderDetail.expressInfo" :to="{ path: '/order/expressInfo', query: { orderNo: orderDetail.orderNo } }"  class="express order-part bottom-1px" tag="div">
          <i class="iconfont icon-daifahuo" style="font-size: 15px;"></i>
          <div class="order-part-content">
            <div class="context">{{ orderDetail.expressInfo.context }}</div>
            <p class="ftime">{{ orderDetail.expressInfo.ftime }}</p>
          </div>
        </router-link>
        <div class="adress order-part">
          <i class="iconfont icon-dizhi"></i>
          <div class="order-part-content">
            <div class="info">
              <span class="name">{{ orderDetail.address.name  }}, {{ orderDetail.address.phone }}</span>
            </div>
            <p class="detail-text">{{ orderDetail.address.province + orderDetail.address.city + orderDetail.address.county + orderDetail.address.detailInfo }}</p>
          </div>
        </div>
        <div v-if="orderDetail.buyerMessage" class="adress order-part bottom-1px">
          <i class="iconfont icon-icon078"></i>
          <div class="order-part-content">
            <div>买家留言：</div>
            <p class="detail-text message">{{ orderDetail.buyerMessage }}</p>
          </div>
        </div>
      </div>
      <split></split>
      <div class="goods">
        <div class="order-box-hd bottom-1px">共计{{ orderDetail.goods.length }}件商品</div>
        <router-link :to="{ path: '/goods/detail', query: { id: item.goodsId } }" v-for="(item,index) in orderDetail.goods" :key="index" class="order-box-bd" :class="{ 'bottom-1px': index < orderDetail.goods.length - 1 }" tag="div">
          <div class="order-img">
            <span class="img-holder"><img :src="item.goodsCover"></span>
          </div>
          <div class="order-content">
            <h3 class="name">{{ item.goodsName }}</h3>
            <div style="height: 15px;">
              <div v-if="item.selectedAttrs" class="param">已选：{{ item.selectedAttrs }}</div>
            </div>
            <div class="order-content-flex">
              <span class="price">¥{{ item.price | toDecimal }}</span>
              <span class="number">x{{ item.quantity }}</span>
            </div>
          </div>
        </router-link>
      </div>
      <split></split>
      <div class="order-total">
        <ul class="bottom-1px">
          <li>商品总额<span>¥{{ orderDetail.totalPrice | toDecimal }}</span></li>
          <!-- <li>优惠销促<span>-¥0.00</span></li> -->
          <li>运费<span>+¥{{ orderDetail.postFee | toDecimal }}</span></li>          
        </ul>
        <p class="total-price">实付金额：<b>¥{{ orderDetail.totalPrice + orderDetail.postFee | toDecimal }}</b></p>
      </div>
      <split></split>
    </div>
  </div>
</template>

<script>
import { Group } from 'vux'	
import ShopHeader from '@/components/public/ShopHeader'
import Split from '@/components/public/Split'
import { toDecimal } from '@/utils/mUtils'
import http from '@/utils/http'

export default {
	components: {
		ShopHeader,
		Group,
    Split
	},
	data () {
		return {
      orderDetail: null,
      countDown: '',
		}
	},
  methods: {
    calcRemainTime (totalTime) {
      totalTime = totalTime - 1000
      let minutes = parseInt(totalTime / 1000 / 60 % 60, 10)
      let seconds = parseInt(totalTime / 1000 % 60, 10)
      this.countDown = `${addZero(minutes.toString())}分钟${addZero(seconds.toString())}秒`
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.calcRemainTime(totalTime)
        if (totalTime <= 1000) {
          this.countDown = `00分钟00秒`
          clearInterval(this.timer)
          this.$vux.confirm.show({
            title: '提示信息',
            content: '该订单已过期!',
            showCancelButton: false,
            onConfirm: () => {
              this.$router.push({ path: '/' })
            }
          })
        }
      }, 1000)

      function addZero (str) {
        return ('00' + str).substr(str.length)
      }
    },
    // 确认收货
    confirmReceive () {
      let orderNo = this.orderDetail.orderNo
      this.$vux.confirm.show({
        title: '提示信息',
        content: '确定要收货吗？',
        onConfirm: () => {
          http.post('/api/v1/order/confirmReceive', { orderNo }, false, res => {
            if (res.status == 1) {
              this.$vux.toast.show({
                type: 'success',
                text: res.msg,
                width: 'auto',
                position: 'middle'
              })
              this.orderDetail.status = '待评价'
            }else {
              this.$vux.toast.show({
                type: 'warn',
                text: res.msg,
                width: 'auto',
                position: 'middle'
              })
            }
          })
        }
      })
    },
    toBuyConfirm () {

    },
    getOrderDetail () {
      let orderId = this.$route.query.id
      http.get('/api/v1/orderDetail', { orderId }, false, res => {
        if (res.status == 1) {
          let orderDetail = res.data
          switch (orderDetail.status) {
            case 0:
              orderDetail.status = '待付款'
              break;
            case 1:
              orderDetail.status = '待发货'
              break;
            case 2:
              orderDetail.status = '待收货'
              break;
            case 3:
              orderDetail.status = '待评价'
              break;
            case 4:
              orderDetail.status = '已完成'
              break;    
          }
          this.orderDetail = orderDetail
          // 倒计时
          if (orderDetail.payRemainTime > 0) {
            this.calcRemainTime(orderDetail.payRemainTime * 1000)
          }
        }
      })
    }
  },
  filters: {
    toDecimal (val) {
      return toDecimal(val)
    }
  },
  mounted () {
    let that = this
    this.getOrderDetail()
    this.$el.onscroll = function () {
      that.$refs.shopHeader.isShow = false
    }
  },
  beforeRouteLeave (to, from, next) {
    clearInterval(this.timer) 
    next()
  }
}
</script>

<style scoped>
.order-detail-top {
  background: #fff;
  padding: 0 15px;
}
.order-status {
  padding: 10px 0;
}
.inner-line {
  display: flex;
  margin: 5px 0;
}
.inner-line p {
  flex: 1;
  font-size: 12px;
  line-height: 14px;
  color: #999;
}
.pay-time {
  height: 14px;
  line-height: 14px;
  font-size: 0;
}
.pay-time i.iconfont {
  position: relative;
  font-size: 12px;
  color: #999;
  margin-right: 3px;
  display: inline-block;
  vertical-align: middle;
}
.pay-time span {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  color: #999;
}
.inner-line p .status {
  color: #3985ff;
}
.inner-line p span {
  color: #333;
}
.order-part {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.order-part i.iconfont {
  flex: 0 0 auto;
  font-size: 20px;
  color: #666;
  margin-right: 10px;
}
.order-part-content {
  flex: 1;
  color: #666;
}
.adress-content .info {
  display: flex;
}
.info .name {
  flex: 1;
}
.info .phone {
  flex: 0 0 auto;
}
.detail-text {
  line-height: 20px;
}
.message {
  font-size: 12px;
}
.order-box-hd {
  position: relative;
  background: #fff;
  font-size: 12px;
  color: #999;
  padding: 8px 15px;
}
.order-box-hd:before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 17px;
}
.order-box-hd:after {
  bottom: 0;
}
.order-box-bd {
  background: #fff;
  display: flex;
  padding: 15px;
}
.order-box-bd:after {
  left: 15px;
  right: 15px;
}
.order-img {
  flex: 0 0 75px;
  width: 75px;
  height: 75px;
  margin-right: 10px;
}
.order-img .img-holder {
  display: block;
  padding-bottom: 100%;
}
.order-content {
  flex: 1;
}
.order-box-bd .name {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.param {
  color: #787878;
  font-size: 12px;
  line-height: 12px;
  padding-top: 3px;
}
.order-content-flex {
  display: flex;
  padding-top: 5px;
  line-height: 14px;
}
.price {
  flex: 1;
  font-size: 14px;
  color: #e93b3d;
}
.number {
  font-size: 14px;
  color: #999;
}
.invoice-info {
  background: #fff;
  padding: 10px 15px;
}
.order-total {
  background: #fff;
  padding: 0 15px;
}
.order-total ul {
  padding: 10px 0;
}
.order-total li {
  font-size: 12px;
  line-height: 21px;
}
.order-total li span {
  float: right;
  color: #e4393c;
}
.total-price {
  text-align: right;
  padding: 8px 0;
  font-size: 12px;
}
.total-price b {
  font-size: 16px;
  color: #e4393c;
}
.btns-wrapper {
  height: 47px;
}
.detail-btns {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 640px;
  background: #fff;
  padding: 8px 15px;
  border-top: 1px solid #f7f7f7;
  z-index: 98;
  font-size: 0;
  text-align: right;
}
.order-btn {
  display: inline-block;
  margin-left: 5px;
}
.order-btn button {
  height: 30px;
  line-height: 30px;
  min-width: auto;
  border-radius: 30px;
}
.express *,
.express i.iconfont {
  color: #09BB07;
}
.context {
  max-height: 36px;
  overflow: hidden;
  line-height: 18px;
  padding-bottom: 8px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
}
</style>
